<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级菜单</title>
    <style>
        * {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <ul id="ul1">
        <li class="li1">
            <a href="#">一级导航1</a>
            <ul class="ul2">
                <li class="li2">
                    <a href="#">二级导航1</a>
                    <ul class="ul3">
                        <li class="li3">
                            <a href="#">三级导航1</a>
                        <li class="li3">
                            <a href="#">三级导航1</a>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="li2">
            <a href="#">二级导航2</a>
            <ul class="ul3">
                <li class="li3">
                    <a href="">三级导航1</a>
                </li>
                <li class="li3">
                    <a href="">三级导航1</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        let li1 = document.getElementsByClassName("li1");
        let ul2 = document.getElementsByClassName("ul2");
        let li3 = document.getElementsByClassName("li3");
        let ul3 = document.getElementsByClassName("ul3");

        // API:XMLHttpRequest是
        let xml = new XMLHttpRequest();
        // json为js对象
        xml.open("get", "./fourteenth.json", true);
        xml.send()
        xml.onreadystatechange = () => {

            console.log(xml.status);
            console.log(xml.readyState);
            if (xml.readyState == 4 && xml.status == 200) {
                let dataS = JSON.parse(xml.responseText).data
                console.log(dataS);
                console.log(typeof dataS);
                dataS.forEach(fir => {
                    console.log(fir);

                    let li2 = ''
                    fir.content.forEach(sec => {

                        let li3 = ''
                        sec.content.forEach(thi => {
                            li3 += ` 
                            <li class="li3">
                                <a href="">${thi}</a>
                            </li>`
                        })

                        li2 += `
                <li class="li2">
                    <a href="#">${sec.title}</a>
                    <ul class="ul3">
                        ${li3}
                    </ul>
                </li>`
                    })

                    li1 += `  
          <li class="li1">
            <a href="#">${fir.title}</a>
            <ul class="ul2">
                ${li2}
            </ul>
        </li>
                    `
                });
                document.getElementById("ul1").innerHTML = li1;


                showHide(li1, ul2);
                showHide(li1, ul3);

            }
        }

        function showHide(lis, uls) {
            for (let i = 0; i < lis.length; i++) {
                lis[i].index = i;
                lis[i].onmouseover = function () {
                    uls[this.index].style.display = "block";
                }
                lis[i].onmouseout = function () {
                    uls[this.index].style.display = "none";
                }
            }
        }


    </script>
</body>

</html>